<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app1">
    <button-component></button-component>
    <button-component></button-component>
    <button-component></button-component>
</div>

<div id="app">
    <child message="hello!"></child>
</div>

<div id="app2">
    <mysite v-for="post in posts" v-bind:id="post.id" v-bind:title='post.title'></mysite>
</div>

<div id="app3">
    <user v-for="peo in user" v-bind:name="peo.name" v-bind:age="peo.age" v-bind:school="peo.school"></user>
</div>

<div id="app4">
    <my-post title="Django 从放弃到大佬" author="zyd"></my-post>
    <my-post title="Vue 从入门到精通" author="zyd"></my-post>
</div>

<div class="app5" v-bind:style="{fontSize:postfontsize}">
    <div v-for="post in pos">
        {{post.id}} ---- {{post.title}}
    </div>
    {{fontsize}}
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
    /*

    组件（Component）是 Vue.js 最强大的功能之一。

    组件可以扩展 HTML 元素，封装可重用的代码。

    组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

    */
    // 基本实例:
    // todo 创建一个vue组件
    Vue.component('button-component', {
        // data对象必须是一个函数,保证组件数据的独立性
        data: function () {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">you click me {{count}}</button>'
    })
    //上面的html元素被一个Vue应用绑定时,才可以使用组件功能
    new Vue({
        el: '#app1'
    })
    //为什么要用组件? : 方便,快捷,代码的重复性低,可读性增强了


    // todo:prop 向子组件传递数据:
    // 注册
    Vue.component('child', {
        // 声明 props
        props: ['message'],
        // 同样也可以在 vm 实例中像 “this.message” 这样使用
        template: '<span>{{massage}}</span>'
    })
    // 创建根实例
    new Vue({
        el: '#app'
    })

    // 动态prop
    Vue.component('mysite', {
        props: ['id', 'title'],
        template: '<h4>{{id}} -- {{title}}</h4>'
    })


    new Vue({
        el: '#app2',
        data: {
            posts: [
                {id: '01', title: '高等数学'},
                {id: '02', title: '线性代数'},
                {id: '03', title: '大学物理'},
            ]
        }
    })

    //这其中的过程:
    // 1.创建Vue实例
    // 2.注册组件,从dom中取数据
    // 3.根据template渲染

    // 注意:每个组件必须要有一个组件的根元素,至少要有一个元素去包裹着子元素

    Vue.component('user', {
        props: ['name', 'age', 'school'],
        template: '<h1>{{name}} -- {{age}}  -- {{school}}</h1>'
    })


    new Vue({
        el: '#app3',
        data: {
            user: [
                {name: 'zyd', age: '18', school: 'tust'},
                {name: 'zqy', age: '19', school: 'hbgc'},
                {name: 'cmy', age: '18', school: 'tust'},
            ]
        }
    })


    Vue.component('my-post',
        {
            props: ['title', 'name', 'author'],
            template: '<h1>{{title}}----------- {{author}}</h1>'
        }
    )
    new Vue({
        el: "#app4"
    })



</script>
</html>